<template>
  <div class="box">
    <el-dialog
      v-model="dialogVisible"
      :title="`客户档案-${baseData ? baseData?.bill_no : ''}-${_creditStatusColor(baseData?.status)}`"
      width="60%"
      :before-close="close"
    >
      <section>
        <!-- 基本信息 -->
        <aside class="mode">
          <span class="title">基本信息</span>
          <el-row :gutter="24" class="padding_18">
            <el-col
              v-for="(item, i) in baseProps"
              v-bind="colLyout"
              :key="i"
            >
              <div class="detail-mode">
                <span class="label">{{ item.label }}</span>
                <span class="text" :class="{ 'remark': item.label == '备注' }">
                  {{ returnBaseForm(baseData[item.prop], item.prop) }}
                </span>
              </div>
            </el-col>
          </el-row>
        </aside>
        <!-- 额度信息 -->
        <aside class="mode">
          <div class="mode_head flex">
            <span class="title">额度信息</span>
            <div class="flex" @click="handleEncryption()">
              <vab-icon icon="eye-close-line" v-if="isEncryption"/>
              <vab-icon icon="eye-line" v-else/>
            </div>
          </div>
          <el-row :gutter="24">
            <el-col
              v-for="(item, i) in quotaProps"
              v-bind="colLyout"
              :key="i"
            >
              <div class="detail-mode">
                <span class="label">{{ item.label }}</span>
                <span class="text">
                  {{ isEncryption ? '****' : (_FieldFormat(baseData[item.prop], item.type) || '--') }}
                </span>
              </div>
            </el-col>
          </el-row>
        </aside>
        <!-- 变更信息 -->
        <aside class="mode">
            <div class="mode_head flex">
                <span class="title">变更信息</span>
            </div>
            <el-scrollbar height="200px">
                <div v-if="logArray.length" >
                    <div class="flex log" v-for="(item, i) in logArray" :key="item.id">
                        <span class="title ellipsis">{{ item.title }}</span>
                        <div class="content flex">
                        <span class="time">{{ item.created_at }}</span>
                        <span class="text" v-html="item.remark"></span>
                        </div>
                    </div>
                </div>
                <span v-else class="remark_text">暂无数据</span>
            </el-scrollbar>
        </aside>
      </section>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { crediCustomerInfo, crediOperateLog } from '~/src/api/dms/credit';
import { FieldFormat } from '~/src/utils/utils';
import { creditStatusColor } from './tools';
const dialogVisible = ref(false)

// 加密
const isEncryption = ref(true)

const colLyout = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 12,
}

const baseData = ref<any>({
  note: ''
})

const baseProps = [
  { label: '客户', prop: 'customer_name', type: '', width: '240' },
  { label: '授信组织', prop: 'org_name', type: 'custom' },
  { label: '币别', prop: 'currency_name', type: 'custom' },
  { label: '信用状态', prop: 'credit_status_str', type: '', width: '100' },
  { label: '备注', prop: 'note', type: '', width: '160' },
]
const quotaProps = ref<any>([
  { label: '固定信用额度', prop: 'credit_amount', type: 'money', width: '240', disable: true },
  { label: '临时信用额度', prop: 'temp_credit_amount', type: 'money', disable: true },
  { label: '已使用额度', prop: 'use_credit_amount', type: 'money', disable: true },
  { label: '额度余额', prop: 'residue_credit_amount', type: 'money', width: '100', disable: true },
  { label: '逾期额度', prop: 'over_amount', type: 'money', width: '160', disable: true },
  { label: '额度逾期天数', prop: 'over_days', type: 'number', width: '160', disable: true },
  { label: '逾期比例', prop: 'over_rate', type: 'money', width: '160', disable: true },
])

let logArray = ref<any>([])

/**
 * @method
 */


const handleEncryption = () => {
  isEncryption.value = !isEncryption.value
}

const returnBaseForm = (value: any, prop = '') => {
  const _value = `${value}`

  if (!_value || _value == 'null' || _value == 'undefined') return '--'
  // 信用状态
  if (prop == 'status') return value == 1 ? '正常检查' : (value == 2 ? '信用冻结' : '信用免检')
  return value
}

const _FieldFormat = (value = '', type = '') => {
  return FieldFormat(value, type, 2)
}

// 信用状态格式化
const _creditStatusColor = (value: string | number, type = 'label') => {
  const obj = creditStatusColor(value)
  return type == 'label' ? obj.label : obj.type
}

const open = async (id = '') => {
  dialogVisible.value = true
  isEncryption.value = true

  try {
    let res = await crediCustomerInfo({ id })
    let log = await crediOperateLog({ id })

    logArray.value = log.data.list
    baseData.value = res.data
  } catch (error) {

  }
}
const close = () => {
  dialogVisible.value = false
}

defineExpose({
  open,
  close,
})

</script>
<style scoped lang="scss">
.box {
  :deep() {
    .el-dialog__header {
      padding: 16px;
    }

    .el-dialog__body {
      padding: 16px;
      padding-top: 0px;
    }
  }
}

.mode {
  background-color: #fffaf4;
  padding-top: 12px;
  padding-left: 12px;
  margin-bottom: 22px;
  border-radius: 4px;

  .mode_head {
    margin-bottom: 12px;
  }

  .padding_18 {
    padding-bottom: 18px;
  }

  .title {
    font-size: 15px;
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 12px;
    margin-right: 12px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -12px;
      width: 4px;
      height: 18px;
      background-color: #f59a23;
    }
  }
}
</style>
